<template>
<div style="padding: 5% 20%;">
	<div class="forum-detail">
		<h3>{{forum.title}}</h3>
		<div class="forum-content" v-html="forum.content"></div>
		<p>创建人：{{forum.userName}}</p>
		<p>{{formatterTime1(forum.createTime)}}</p>
		<p>
			<el-text>
			  <el-icon><View /></el-icon>
			  {{forum.views}}
			</el-text>
		</p>
		<p>
			<el-text @click="doCollect">
			  <el-icon v-if="collectFlag"><StarFilled /></el-icon>
			  <el-icon v-else><Star /></el-icon>
			  {{collects}}
			</el-text>
		</p>
	</div>
	<div class="forum-comment">
		<el-input v-model="content" v-on:keyup.enter="commentSend" clearable maxlength="50" show-word-limit>
			<template #append>
				<el-button type="primary" @click="commentSend">发送</el-button>
			</template>
		</el-input>
		<ul style="list-style: none;">
			<li style="width: 100%;" v-for="item in commentList">
				<p style="font-size: 16px; color: #afa9a9;">{{item.userName}}  {{formatterTime1(item.createTime)}}</p>
				<p style="font-size: 22px; text-indent: 1em;">{{item.content}}</p>
			</li>
		</ul>
	</div>
</div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { imageBaseUrl, formatterTime1 } from "@/global/index.js"
const { proxy } = getCurrentInstance()

const forumId = proxy.$route.params.id
const forum = reactive({})
let collectFlag = ref(false)
let collects = ref(0)
const detailInit = async () => {
	let result = await proxy.axios.get('forum/detail?id=' + forumId)
	if (!result) {
	  return
	}
	collectFlag.value = result.collectFlag
	collects.value = result.collects
	Object.assign(forum, result)
	document.title = result.title
}
detailInit()

let commentList = ref([])
const commentInit = async () => {
	let result = await proxy.axios.get('forumComment/list?forumId=' + forumId)
	if (!result) {
	  return;
	}
	commentList.value = result
}
commentInit()

let content = ref("")
const commentSend = async () => {
	let param = {
		  forumId: forumId,
		  content: content.value
	}
	let result = await proxy.axios.post('forumComment/save', param)
	if (!result) {
		return
	}
	content.value = ""
	commentInit()
}

const doCollect = async () => {
	let result = await proxy.axios.get('forumCollect?forumId=' + forumId)
	
	collects.value = result
	collectFlag.value = !collectFlag.value
}

</script>

<style scoped>
	.forum-detail h3 {
		text-align: center;
	}
	.forum-detail .forum-content {
		text-indent: 2em;
		min-height: 500px;
	}
	.forum-detail p {
		text-align: right;
		/* padding-right: 5%; */
	}
	.forum-comment {
		padding: 5% 2%;
	}
</style>